<!-- src/components/Header.vue -->
<template>
  <el-menu
      :default-active="activePath"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :ellipsis="false"
  >
    <el-menu-item index="0" disabled>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="#ffffff" d="M14 12a2 2 0 0 0-1.008.305L10.78 10.15a3.44 3.44 0 0 0 .74-1.993L13.09 8a1.49 1.49 0 1 0-.089-.768l-1.591.128a3.51 3.51 0 0 0-1.978-2.521L9.74 4H10a2 2 0 1 0-1.01-.265l-.27.855a3.3 3.3 0 0 0-.754-.084c-.83 0-1.59.296-2.181.789L2.791 2.291a1.5 1.5 0 1 0-1.291.71c.281-.001.544-.079.767-.214L5.26 5.791a3.45 3.45 0 0 0-.76 2.168v.203l-.66.11a2 2 0 1 0 .161.786L4 8.999l.63-.097a3.52 3.52 0 0 0 1.466 1.992l-.556 1.188a2 2 0 0 0-.539-.08h-.017a2 2 0 1 0 1.231.423l.566-1.153c.364.146.787.231 1.229.231c.847 0 1.621-.311 2.216-.824l2.176 2.124a2 2 0 1 0 1.6-.8zm-9 3a1 1 0 1 1 0-2a1 1 0 0 1 0 2m3-4.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5"/></svg>
      <span style="font-size: 24px;margin-left: 10px;font-weight: bold;">{{ title }} ({{ user}})</span>
    </el-menu-item>
    <el-menu-item
        v-for="item in navItems"
        :key="item.path"
        :index="item.path"
    >
      <router-link :to="item.path" class="menu-link">
        {{ item.label }}
      </router-link>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useUserStore } from '@store/userStore'
import router from "../router/index.js";
const activePath = ref("")
const props = defineProps({
  title: { type: String, default: '网络实验平台' }
})

// 从全局状态中获取用户角色，默认为匿名
const userStore = useUserStore()
const userRole = computed(() => userStore.role)

// 通过 router.getRoutes() 获取所有路由配置，过滤出 meta 中有 navLabel 并且允许当前角色访问的路由
const navItems = computed(() => {
  return router.getRoutes()
      .filter(route => route.meta.roles && route.meta.roles.includes(String(userStore.role).toLowerCase()))
      .map(route => ({
        path: route.path,
        label: route.meta.navLabel
      }))
})

const user = computed(() => {
  switch (String(userStore.role).toLowerCase()) {
    case 'anonymous':
      return '未登录'
    case 'student':
      return '学生'
    case 'teacher':
      return '教师'
    case 'admin':
      return '管理员'
  }
})
</script>


<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
.el-menu--horizontal {
  --el-menu-horizontal-height: 50px;
}
</style>
